<template>
  <!-- 抢案案件 -->
  <section class="page robbery-case">
    <data-form :model="roleModel" :page="pageService" @handleResetForm="handleResetForm" @onSearch="refreshData">
      <template slot="inputs">
        <el-form-item label="订单编号" prop="caseNumber">
          <el-input v-model="roleModel.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model="roleModel.personalName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model="roleModel.mobileNo"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="roleModel.idCard"></el-input>
        </el-form-item>
        <!--  机构有问题还没改 -->
        <el-form-item label="机构" prop="deptIds">
          <el-cascader :options="departmentData" :props="{value:'id',label:'deptName'}" :show-all-levels="false" change-on-select clearable v-model="roleModel.deptIds"></el-cascader>
        </el-form-item>
        <el-form-item label="地区" prop="area">
          <el-input v-model="roleModel.area"></el-input>
          <!-- <el-cascader v-model="roleModel.area" :options="$city.getCityData()" change-on-select clearable></el-cascader> -->
        </el-form-item>
        <el-form-item label="催收员" prop="currentCollectorRealName">
          <el-input v-model="roleModel.currentCollectorRealName"></el-input>
        </el-form-item>
        <el-form-item label="案件金额" prop="caseMoney">
          <number-range :isInteger="true" v-model="roleModel.caseMoney"></number-range>
        </el-form-item>
        <el-form-item label="欠款金额" prop="overdueAmount">
          <number-range :isInteger="true" v-model="roleModel.overdueAmount"></number-range>
        </el-form-item>
        <el-form-item label="逾期期数" prop="overduePeriod">
          <el-select clearable placeholder="请选择" v-model="roleModel.overduePeriod">
            <el-option :key="index" :label="name" :value="code.replace(/M|\+/, '')" v-for="{index,name,code} in $dict.getDictData('OverduePeriodStatus')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="逾期天数" prop="overdueDays">
          <number-range :isInteger="true" v-model="roleModel.overdueDays"></number-range>
        </el-form-item>
        <el-form-item label="行动代码:" prop="followupBack">
          <el-select @change="setCheckTime" clearable v-model="roleModel.followupBack">
            <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in $dict.getDictData('FollowupBack')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="流转来源" prop="turnSource">
          <el-select clearable placeholder="请选择" v-model="roleModel.turnSource">
            <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in $dict.getDictData('TurnSource')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品类型" prop="productCategory">
          <el-input v-model="roleModel.productCategory"></el-input>
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="roleModel.productName"></el-input>
        </el-form-item>
        <el-form-item label="案件流入时间" prop="followInTime">
          <el-date-picker :editable="false" clearable placeholder="选择日期时间" type="daterange" v-model="roleModel.followInTime"></el-date-picker>
        </el-form-item>
        <el-form-item label="案件标签" prop="labelName">
          <get-label-name :formModel="roleModel" v-model="roleModel.labelName"></get-label-name>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="roleDataSet" :page="pageService" :selectionList.sync="selectionList" @onPageChange="refreshData">
      <template slot="buttons">
        <el-button @click="manualDistruibute" v-auth="1803">分案</el-button>
        <el-button @click="robberyClick" v-auth="1803">抢案</el-button>
      </template>
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column :min-width="$helper.getOperateWidth(3)" label="操作">
          <template slot-scope="scope">
            <el-button @click="openExecutionPage(scope.row)" type="text">案件详情</el-button>
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(7)" label="订单编号" prop="caseNumber" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="客户姓名" prop="personalName" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="手机号" prop="mobileNo" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="身份证号" prop="idCard" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="地区" prop="area"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="案件金额(元)" prop="caseMoney"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="欠款金额（元）" prop="overdueAmount" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="逾期期数" prop="overduePeriod"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="逾期天数" prop="overdueDays"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="产品类型" prop="productCategory"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="产品名称" prop="productName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="机构" prop="departmentName" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="催收员" prop="currentCollectorRealName" show-overflow-tooltip></el-table-column>
        <el-table-column :formatter="(row) => $filter.dictConvert(row.turnSource,'TurnSource')" :min-width="$helper.getColumnWidth(4)" label="流转来源" prop="turnSource" show-overflow-tooltip></el-table-column>
        <el-table-column :formatter="(row) => $filter.dateTimeFormat(row.followInTime)" :min-width="$helper.getColumnWidth(6)" label="案件流入时间" prop="followInTime" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="行动代码" prop="followupBack" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.followupBack | dictConvert('FollowupBack')}}</span>
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="诉讼状态" prop="lawPhase" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="反欺诈结果" prop="unCheatResult" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(10)" label="案件标签" prop="labelName"></el-table-column>
      </template>
    </data-box>
    <!-- 抢案申请 -->
    <el-dialog :center="true" :visible.sync="dialog.robbery" @close="$refs['robbery-components'].reset()" @open="$nextTick(()=>$refs['robbery-components'].update())" title="抢案申请" width="800px">
      <robbery-components :caseIds="caseIds" @close="dialog.robbery=false;refreshData()" ref="robbery-components"></robbery-components>
    </el-dialog>
    <!-- 跟进记录 -->
    <el-dialog :center="true" :visible.sync="dialog.followrecordShow" @open="$nextTick(()=>$refs['follow-up-record-common'].update())" title="跟进记录" width="1200px">
      <follow-up-record-common :followUpId="followUpId" ref="follow-up-record-common"></follow-up-record-common>
    </el-dialog>
    <!-- 点击分案 -->
    <el-dialog :center="true" :visible.sync="dialog.distrubute" @open="$nextTick(()=>$refs['repair-case-distrubute'].update())" title="案件分配" width="600px">
      <repair-case-distrubute :robberyCaseTrue="robberyCaseTrue" :selectionList="selectionList" @close="dialog.distrubute=false;refreshData()" @success="refreshData" ref="repair-case-distrubute"></repair-case-distrubute>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies, Layout, Auth } from "~/core/decorator";
import { PageService } from "~/utils/page.service";

import { Getter, namespace } from "vuex-class";
import { RobCaseService } from "~/services/domain-service/rob-case.service.ts";
import { SortService } from "~/utils/sort.service";
import RobberyComponents from "~/components/common-manages/robbery-components.vue";
import FollowUpRecordCommon from "~/components/common-manages/follow-up-record-common.vue";
import NumberRange from "~/components/common/number-range.vue";
import { CASE_CHANNEL, MENU_CHANNEL } from "~/config/enum.config";
import RepairCaseDistrubute from "~/components/common-manages/credit-repair-case/repair-case-distrubute.vue";
import GetLabelName from "~/components/labeling-strategy/get-label-name.vue";

const CollectionExecutionModule = namespace("collection-execution");
@Auth(1801)
@Layout("workspace")
@Component({
  components: {
    GetLabelName,
    RobberyComponents,
    NumberRange,
    FollowUpRecordCommon,
    RepairCaseDistrubute
  }
})
export default class RobberyCase extends Vue {
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(RobCaseService) private robCaseService: RobCaseService;
  @Dependencies(SortService) private sortService: SortService;
  @Getter private departmentData;
  @CollectionExecutionModule.Action private openCollectionExecution;
  private selectionList: any = [];
  private caseIds: any = [];
  private roleModel: any = {
    caseNumber: "", // 订单编号
    personalName: "", // 客户姓名
    mobileNo: "", // 联系电话
    idCard: "", // 身份证号
    deptIds: [], // 机构
    area: "", // 地区
    currentCollectorRealName: "", // 催收员
    customerCategory: "", // 客户类型
    overdueAmount: {
      // 欠款金额
      max: "",
      min: ""
    },
    caseMoney: { min: "", max: "" },
    overduePeriod: "", // 逾期期数
    overdueDays: {
      max: "",
      min: ""
    },
    followupBack: "", // 行动代码
    turnSource: "", // 流转来源
    productCategory: "", // 产品类型
    productName: "", // 产品名称
    followInTime: [], // 案件流转时间
    labelName: []
  };
  private followUpId: any = ""; // 跟进id
  private roleDataSet = [];
  private roleObj: any = {};
  private dialog: any = {
    distrubute: false, // 分案
    robbery: false, //  抢案
    followrecordShow: false //  跟进记录
  };
  private robberyCaseTrue: boolean = true;

  /**
   * 获取案件数据
   */
  private refreshData() {
    this.robCaseService
      .robCasesQuery(this.roleModel, this.pageService, this.sortService)
      .subscribe(data => {
        this.roleDataSet = data;
        this.selectionList = [];
      });
  }

  /**
   * 范围输入框的重置
   */
  private handleResetForm() {
    this.roleModel.overdueAmount = { min: "", max: "" };
    this.roleModel.overdueDays = { max: "", min: "" };
    this.roleModel.caseMoney = { min: "", max: "" };
  }

  /**
   * 点击抢案
   */
  private robberyClick() {
    if (this.selectionList.length <= 0) {
      this.$message.info("请先选择案件");
      return;
    }
    this.caseIds = this.selectionList.map(v => v.id);
    this.dialog.robbery = true;
  }

  /**
   * 点击 跟进记录
   */
  private followrecordsclick(row) {
    this.followUpId = row.id;
    this.dialog.followrecordShow = true;
  }

  /**
   * 行动代码
   */
  private setCheckTime() {
    if (!this.roleModel.followupBack) {
      this.roleModel.checkTime = "";
    }
    if (
      this.roleModel.followupBack === "PTP" ||
      this.roleModel.followupBack === "CAPT"
    ) {
      const currentTime: any = new Date();
      this.roleModel.checkTime = this.$filter.dateTimeFormat(
        new Date((currentTime / 1000 + 86400 * 3) * 1000)
      );
    } else {
      const currentTime: any = new Date();
      this.roleModel.checkTime = this.$filter.dateTimeFormat(
        new Date((currentTime / 1000 + 86400) * 1000)
      );
    }
  }

  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    this.$router.openCaseDetail(row.id, {
      menuChannel: MENU_CHANNEL.Case_of_robbery,
      hiddenCaseList: true,
      hiddenAction: true
    });
  }

  private mounted() {
    this.refreshData();
  }

  /**
   *  点击分案
   */
  private manualDistruibute() {
    if (this.selectionList.length === 0) {
      this.$message("请选择要分配的案件");
    } else {
      this.robberyCaseTrue = true;
      this.dialog.distrubute = true;
    }
  }
}
</script>

<style lang="less">
</style>
